<template>
  <!-- <Map /> -->
  <div
    id="Mmp"
    v-loading="loading"
    element-loading-text="数据量较大，正在为您加载 '地图' 以及 '点位' ......"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    ref="Mmp"
    style="width: 100%; height: 100%"
  ></div>
  <el-input v-model="value"></el-input>
  <el-button @click="sub" type="primary">确定</el-button>
  <el-button @click="gw" type="primary" style="margin-left: 80px;">获取天气</el-button>
</template>

<script setup>
import { ref, createApp, h, onMounted } from "vue";
import areaDialog from './areaDialog/index.vue'
import bus from '@/utils/bus'
import Mp from "./map"; // 地图工具类
import { bestFn } from "./initSelect";
import axios from "axios";
import img from "./img/point.png";
import img2 from "./img/point2.png";
import img3 from "./img/point3.png";
import img4 from "./img/point4.png";
import img5 from "./img/point5.png";
import sjjData from "./data"; // 石家庄数据

let selectKey = (key) => {
  let res = {
    showText: false,
    url: "",
  };
  if (key > 0 && key < 100) {
    res.url = img;

    res.showText = false;
  }
  if (key > 100 && key < 200) {
    res.url = img2;
    res.showText = false;
  }
  if (key > 200 && key < 400) {
    res.url = img3;
    res.showText = false;
  }
  if (key > 400 && key < 800) {
    res.url = img4;
    res.showText = false;
  }
  if (key > 800) {
    res.url = img5;
    res.showText = true;
  }

  return res;
};
// 处理石家庄数据
let mapData = sjjData.map((item, key) => {
  let obj = {
    center: [item.longitude * 1, item.latitude * 1], //点标记位置
    data: {
      name: item.stationName,
      ho_inner: `<h1 style="color:red">${item.stationName}</h1>`,
      ck_inner: `<h1 style="color:red">${item.stationName}</h1><h1 style="color:blue">${item.stationName}</h1><h1 style="color:yellowgreen">${item.stationName}</h1>`,
      iconData: selectKey(key),
    },
  };
  return obj;
});

let hoverFn = (params) => {
  return `<div class="amap-info-window"> ${params.ho_inner} <div class="amap-info-sharp" style="width: 0;height: 0;border: 8px solid transparent;position: absolute;left: 50%;transform: translateX(-50%);border-top-color: rgba(18, 75, 109, 0.8);"></div></div>`;
};
let value = ref("");
let loading = ref(true);
let options = {
  el: "Mmp",
  areaName: "北京",
  center: [116.405285, 39.904989],
  satellite: true, // 卫星图
  roadNet: false, // 路网
  icon: img, // 点位图片
  iconSize: [21, 31], // 点位图片大小
  overTemplate: hoverFn, // 鼠标滑过的函数模板,返回一个html结构即可
  overData: [],
  iconOffset: [1, 18],
  click: true,
  hover: true,

};
onMounted(async () => {
  await allCity();
  initFn();
});

const allCity = async () => {

  let Content = createApp({
      render() {
        return h(<areaDialog></areaDialog>)
      },
  });
  const parent = document.createElement('div')
  const instance = Content.mount(parent)
  console.log(Content,instance.$el);

  let xxxx = await axios.get(
    "https://a.amap.com/jsapi_demos/static/demo-center/data/mock_position.js"
  );
  var positions = JSON.parse(xxxx.data.split("= ")[1]).slice(0, 3000);
  positions = positions.map((item, key) => {
    let obj = {
      data: {
        name: '张三' + (key + 1),
        ho_inner: `<h1 style="color:red">张三${key + 1}</h1>`,
        ck_inner: instance.$el,
        iconData: selectKey(key),
      },
      center: item,
    };
    return obj;
  });
  options.overData = positions;
};

const sub = async () => {
  let city = await axios.get(
    "https://webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/assets/d_v1/country_tree.json"
  );

  let res = bestFn([city.data], value.value);
  options.areaName = value.value;
  options.center = res.center;
  options.overData = mapData;
  initFn();
};

const initFn = async () => {
  loading.value = true;

  Mp.initMap(options).then((res) => {
    loading.value = false;
  });
};

Mp.click((data) => {
  console.log(data);
  bus.emit('init')
})

const gw = () => {
  Mp.getWeather('石家庄').then(res=>{
    console.log(res,111);
  })
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
}
.el-button {
  position: absolute;
  left: 230px;
  top: 20px;
  z-index: 10;
}
</style>
